<script setup lang="ts">
import HomeContent from '@/components/HomeContent/index.vue'
import { useUserStore } from '@/stores'
import { computed } from 'vue'
const userStore = useUserStore()
const gender = computed(() => {
  if (userStore.userInfo?.userInfo?.gender !== '2') {
    return userStore.userInfo?.userInfo?.gender === '0' ? '男' : '女'
  } else {
    return '保密'
  }
})
</script>
<template>
  <HomeContent>
    <template #title> 基本信息 </template>
    <template #content>
      <el-descriptions
        direction="horizontal"
        :column="1"
        :size="'large'"
        border
      >
        <el-descriptions-item label="用户名" :width="'90px'">{{
          userStore.userInfo?.userInfo?.username
        }}</el-descriptions-item>
        <el-descriptions-item label="昵称">{{
          userStore.userInfo?.userInfo?.nickname
        }}</el-descriptions-item>
        <el-descriptions-item label="手机号">{{
          userStore.userInfo?.userInfo?.phone
        }}</el-descriptions-item>
        <el-descriptions-item label="性别">{{ gender }}</el-descriptions-item>
        <el-descriptions-item label="房间号">{{
          userStore.userInfo?.userInfo?.roomId
        }}</el-descriptions-item>
      </el-descriptions>
    </template>
  </HomeContent>
</template>

<style scoped></style>
